<!DOCTYPE html>

<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="Description" content="华山牧创新创意营销大赛" />
		<meta name="Keywords" content="华山牧创新创意营销大赛" />
		<meta name="author" content="Tencent-TGideas">
		<link href="webpages/wx/zkly2/css/huadong.css" rel="stylesheet" media="all">
		<title>华山牧创新创意营销大赛</title>
	</head>

	<body onload="init();">
		<div class="wrap" id="scene">
			<h1>华山牧创新创意营销大赛</h1>
			<div class="sec">
				<div class="bg">
					<div class="bg_sec bg01"></div>
					<div class="bg_sec bg02"></div>
					<div class="bg_sec bg03"></div>
					<div class="bg_sec bg04"></div>
					<!--            <div class="bg_sec bg05"></div> -->
				</div>

				<section class="sec01 sec01_show" style="display:;">
					<span class="start"><b aria-hidden="true" data-icon="1"></b></span>
				</section>
				<section class="sec02 " style="display:;">
					<span class="start"><b aria-hidden="true" data-icon="1"></b></span>
				</section>
				
				<section class="sec03" style="display:;">
					<input id="showv" id="showv" type="hidden"/>
					<div class="txt8">
						<style>
							.mui-table-view {
						    position: relative;
						    margin-top: 0;
						    margin-bottom: 0;
						    padding-left: 0;
						    list-style: none;
						    background-color: transparent;
						}
						.mui-table-view:before {
							position: absolute;
							right: 0;
							left: 0;
							height: 1px;
							content: '';
							-webkit-transform: scaleY(.5);
							transform: scaleY(.5);
							background-color: #c8c7cc;
							top: -1px;
						}
						
						.mui-table-view-cell {
							  position: relative;
						    overflow: hidden;
						    padding: 11px 15px;
						    border-radius: 5px;
						    -webkit-touch-callout: none;
						    background-color: #A3D5EB;
						    width: 87%;
						    margin: 10px;
						    height: 80px;
						   /* background: url(img/libox.png) center top no-repeat;*/
						}
						
						.mui-table-view-cell>a:not(.mui-btn) {
							position: relative;
							display: block;
							overflow: hidden;
							margin: -11px -15px;
							padding: inherit;
							white-space: nowrap;
							text-overflow: ellipsis;
							color: inherit;
							    width: 85%;
    						float: left
						}
						
						.mui-table-view .mui-media-object {
							line-height: 42px;
						    max-width: 70px;
						    height: 70px;
						    border: 4px solid yellow;
						    border-radius: 5px;
						}
						
						.mui-table-view .mui-media-object.mui-pull-left {
							margin-right: 10px;
						}
						
						.mui-pull-left {
							float: left;
						}
						
						.mui-table-view-cell:after {
							position: absolute;
							right: 0;
							bottom: 0;
							left: 15px;
							height: 1px;
							content: '';
							-webkit-transform: scaleY(.5);
							transform: scaleY(.5);
							background-color: #c8c7cc;
						}
						.mui-table-view .mui-media-body {
							color: #FA6A08;
						    text-align: left;
						    padding-left: 3.5rem;
						    font-size: 18px;
						    position: relative;
    						top: -10px;
						}
						.mui-table-view .mui-media-body .mui-ellipsis {
							font-size: 16px;
						    margin-top: 0;
						    margin-bottom: 10px;
						    color: #617a84;
						    overflow: hidden;
						    white-space: nowrap;
						    text-overflow: ellipsis;
						    padding-left: 0rem;
						}
						/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
						::-webkit-scrollbar  
						{  
						    width: 10px;  
						    height: 10px;  
						    background-color: #44A9D7;  
						}  
						  
						/*定义滚动条轨道 内阴影+圆角*/  
						::-webkit-scrollbar-track  
						{  
						    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
						    border-radius: 10px;  
						    background-color: #44A9D7;  
						}  
						  
						/*定义滑块 内阴影+圆角*/  
						::-webkit-scrollbar-thumb  
						{  
						    border-radius: 10px;  
						    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
						    background-color: #7CD5FF;  
						}  
						.mui-navigate-right .mui-media-body img{
							    position: relative;
    							top: 5px;
						}
						.mui-ellipsis span{
							    color: #306E8D;
    							border-bottom: 1px solid #306E8D;
						}
						.detailImg {
							    width: 60px;
							    height: 45px;
							    position: relative;
							    right: 5px;
						}
						</style>
						<ul class="mui-table-view">
							<#if teams??>
							<#list teams as t>
							<li class="mui-table-view-cell mui-media">
								<a class="mui-navigate-right">
									<img class="mui-media-object mui-pull-left" src="${(t.imgUrl)!''}" onerror="this.src='webpages/wx/zkly2/img/shuijiao.jpg'">
									<div class="mui-media-body">
										<#if t_index<3>
										<img src="webpages/wx/zkly2/img/no${t_index+1}.png" />
										</#if>
										${(t.teamName)!}
									</div>
									<div class="mui-media-body">
										<p class="mui-ellipsis"><img style="width: 15px;" src="webpages/wx/zkly2/img/zxl.png" />总销量：<span>${(t.totalCount)!}</span></p>
									</div>
									<div class="mui-media-body">
										<p class="mui-ellipsis"><img style="width: 15px;" src="webpages/wx/zkly2/img/kh.png" />口&nbsp;&nbsp;&nbsp;号：<span>${(t.teamKouHao)!}</span></p>
									</div>
								</a>
								<a class="mui-navigate-right" href="indexZkly2.action?detail&teamId=${(t.id)!}" style="width: 15%;padding-top: 25px;color: #58B2DC;"><img class="detailImg" src="webpages/wx/zkly2/img/detail.png"></a>
							</li>
							</#list>
							</#if>
						</ul>
					</div>
					<div id="end-bg">
						<div style="z-index: 3;background: url(webpages/wx/zkly2/img/end.png) center top no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;height: 100%;"></div>
					</div>
					<span class="start"><b aria-hidden="true" data-icon="1"></b></span>
				</section>
				<section class="sec04" style="display:;">
				</section>
			</div>

			<div class="DialogDiv" style="display:none; ">
				<div class="U-guodu-box">
					<div>
						<table width="100%" cellpadding="0" cellspacing="0" border="0">
							<tr>
								<td align="center"><img src="webpages/wx/pzsw/images/loading.gif"></td>
							</tr>
							<tr>
								<td valign="middle" align="center">数据处理中，请稍后！</td>
							</tr>
						</table>
					</div>
				</div>
	</body>
	<script src="webpages/wx/zkly2/js/parallax.js"></script>
	<!-- <script src="webpages/wx/zkly2/js/zepto.min.js"></script> -->
	<script src="webpages/wx/zkly2/js/ping_tcss_ied.js"></script>
	<script src="webpages/wx/zkly2/js/jquery-1.12.4.min.js"></script>
	<script src="webpages/wx/zkly2/js/ajaxfileupload.js"></script>
	<script>
		function AddRunningDiv() {
			// 	$("#BgDiv1").css({ display: "block", height: $(document).height() });
			var yscroll = document.documentElement.scrollTop;
			var screenx = $(window).width();
			var screeny = $(window).height();
			$(".DialogDiv").css("display", "block");
			$(".DialogDiv").css("top", yscroll + "px");
			var DialogDiv_width = $(".DialogDiv").width();
			var DialogDiv_height = $(".DialogDiv").height();
			$(".DialogDiv").css("left", (screenx / 2 - DialogDiv_width / 2) + "px")
			$(".DialogDiv").css("top", (screeny / 2 - DialogDiv_height / 2) + "px")
			$("body").css("overflow", "hidden");
		}

		function MoveRunningDiv() {
			$(".DialogDiv").css({
				display: "none"
			});
		}

		function changeFile() {
			var uploadFile = document.getElementById("uploadFile");
			file = uploadFile.files[0];
			if(file === null || file === undefined) {
				alert("请选择您要上传的文件！");
			}
			var fileName = file.name;
			var extStart = fileName.lastIndexOf(".");
			var ext = fileName.substring(extStart, fileName.length).toUpperCase();
			if(ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {
				alert("图片限于png,gif,jpeg,jpg格式");
				return;
			}

			var fileSize = file.size;

			//计算文件大小 
			var size = Math.floor(fileSize / 1024);
			if(size > 5024) {
				alert("上传文件不得超过5M!");
				return false;
			};

			AddRunningDiv();
			$.ajaxFileUpload({
				url: 'zkly.action?upload&uuid=${uuid!}', //用于文件上传的服务器端请求地址
				secureuri: false, //是否需要安全协议，一般设置为false
				fileElementId: 'uploadFile', //文件上传域的ID
				dataType: 'JSON', //返回值类型 一般设置为json
				success: function(data, status) //服务器成功响应处理函数
				{
					MoveRunningDiv();
					console.log(1);
					console.log(data);
					var d = $.parseJSON(data);
					$('#imgUrl').val(d.obj);
					$('#uploadImg').css("background", "url(" + d.obj + ") center top no-repeat");
					$('#uploadImg').css("background-size", "100% 100%");
					$('#uploadImg').css("-moz-background-size", "100% 100%");
				},
				error: function(data, status, e) //服务器响应失败处理函数
				{
					MoveRunningDiv();
					//             	alert();
				}
			})
		}

		// function IsPC()  
		// {  
		//            var userAgentInfo = navigator.userAgent;  
		//            var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");  
		//            var flag = true;  
		//            for (var v = 0; v < Agents.length; v++) {  
		//                if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }  
		//            }  
		//            return flag;  
		// }

		// var jumpPc = IsPC();
		// if(jumpPc!=false){
		// window.location.href = "http://up.qq.com";
		// }
		 var overscroll = function(el){ 
		    el.addEventListener('touchstart', function(){ 
		      var top = el.scrollTop; 
		      var totalScroll = el.scrollHeight; 
		      var currentScroll = top + el.offsetHeight; 
		      
		      //$("#showv").val(currentScroll + " touchstart " + totalScroll)
		      if(top === 0) { 
		        el.scrollTop = 1; 
		      }else if(currentScroll === totalScroll){ 
		        el.scrollTop = top - 1; 
		      } 
		    }); 
		    el.addEventListener('touchmove', function(evt){ 
		    var top = el.scrollTop; 
		      var totalScroll = el.scrollHeight; 
		      var currentScroll = top + el.offsetHeight; 
		    	$("#showv").val(currentScroll + " touchmove " + totalScroll)
		    	
		      if(el.offsetHeight < el.scrollHeight){ 
		        evt._isScroller = true; 
		      } else {
		      }
		    }); 
		    el.addEventListener('touchend', function(evt){ 
		    	var top = el.scrollTop; 
		      var totalScroll = el.scrollHeight; 
		      var currentScroll = top + el.offsetHeight; 
		    	$("#showv").val(currentScroll + " touchend " + totalScroll)
				/*if(currentScroll>totalScroll){
					var preHandler = function(e){e.preventDefault();}
					document.body.addEventListener('touchmove', preHandler, false);
					//document.removeEventListener('touchmove', preHandler, false);
				}*/
		    }); 
		  } 
		  overscroll(document.querySelector('.txt8'));//哪里需要可以局部滚动，添加一个“scroll”的class 
		  document.body.addEventListener('touchmove', function(evt) { 
		    if(!evt._isScroller){ 
		      evt.preventDefault(); 
		      evt.stopPropagation(); 
		    } 
		  },false);
		  
		  
		  
		document.body.addEventListener('touchstart', function(e) {
			//console.log("target:"+e.target.className);
			if(!e.target.className.startsWith("sec")) {
				$('body').css({"height":"100%","overflow":"hidden"});
				$('html').css({"height":"100%","overflow":"hidden"});
			} else {
				e = e.changedTouches[0];
				onStart(e);
			}
		});

		document.body.addEventListener('touchmove', function(e) {
			if(!e.target.className.startsWith("sec")) {
				$('body').css({"height":"100%","overflow":"hidden"});
				$('html').css({"height":"100%","overflow":"hidden"});
			} else {
				onMove(e.changedTouches[0], e);
			}
		});

		document.body.addEventListener('touchend', function(e) {
			if(!e.target.className.startsWith("sec")) {
				$('body').css({"height":"100%","overflow":"hidden"});
				$('html').css({"height":"100%","overflow":"hidden"});
			} else {
			onEnd(e.changedTouches[0]);
			}
		});

		// 翻转的绑定
		window.onorientationchange = orientationChange;

		function initPage() {
			pageWidth = $(window).width();
			pageHeight = $(".wrap").height();
			pages = $(".wrap section");
			$(".bg .bg_sec").css("height", pageHeight);
			var bg_sec_height = $('.bg .bg_sec').height();
			$(".svg").css("height", bg_sec_height * 8);

			$(".wrap section").css({
				"width": pageWidth + "px", //"height":$(".wrap").height()+"px"
				"height": pageHeight + "px"
			});
			//$(".wrap").height($(".wrap").height());

			secHeight = pageHeight * $(".wrap section").length;
			lineHeight = 832 * secHeight / pageHeight;

			$(".sec, .line").addClass("drag");
			animatePage(curPage);
			//$(".sec, .line").removeClass("drag");

		}

		function orientationChange() {
			initPage();
		}

		// 以下是拖动效果
		var startX = 0,
			startY = 0;
		margin = 0;
		var pages = null;
		var curPage = ${curPage!0};
		var pageWidth = 0,
			pageHeight = 0;
		var lineHeight = 0,
			secHeight = 0;
		var targetElement = null;
		var scrollPrevent = false,
			movePrevent = false,
			touchDown = false;

		$(document).ready(function() {
			initPage();
		});

		function onStart(e) {
			if(movePrevent == true) {
				e.preventDefault();
				return false;
			}
			if($(e.target).parents("#container").length == 1) {
				scrollPrevent = true;
			} else {
				scrollPrevent = false;
			}

			$(".map").on('click', function(e) {
				$(".map_show").addClass("show");
			})

			if(!$(e.target).parents("#container").length == 1) {
				$(".map_show").removeClass("show");
			}

			touchDown = true;

			// 起始点，页面位置
			startX = e.pageX;
			startY = e.pageY;
			//margin = parseInt($(".sec").css("top"));
			//-webkit-transform:translateY(0px)

			//matrix(1, 0, 0, 1, 0, 8)

			$(".sec, .line").addClass("drag");

			margin = $(".sec").css("-webkit-transform");
			//margin = "matrix(1, 0, 0, 1, 0, -50)";
			margin = margin.replace("matrix(", "");
			margin = margin.replace(")", "");
			margin = margin.split(",");
			margin = parseInt(margin[5]);
		}

		function onMove(e, oe) {
			if(movePrevent == true || touchDown != true) {
				e.preventDefault();
				return false;
			}
			event.preventDefault();
			if(scrollPrevent == false && e.pageY != startY) {
				var temp = margin + e.pageY - startY;
				$(".sec").css("-webkit-transform", "matrix(1, 0, 0, 1, 0, " + temp + ")");
				var b = lineHeight / secHeight * temp;
				$(".line").css("-webkit-transform", "matrix(1, 0, 0, 1, 0, " + b + ")");
			}
		}

		function onEnd(e) {
			if(movePrevent == true) {
				e.preventDefault();
				return false;
			}

			touchDown = false;

			if(scrollPrevent == false) {
				// 抬起点，页面位置
				endX = e.pageX;
				endY = e.pageY;
				// swip 事件默认大于50px才会触发，小于这个就将页面归回
				if(Math.abs(endY - startY) <= 50) {
					animatePage(curPage);
				} else {
					if(endY > startY) {
						prevPage();
					} else {
						nextPage();
					}
				}
			}

			$(".sec, .line").removeClass("drag");
		}

		function prevPage() {
			var newPage = curPage - 1;
			animatePage(newPage);
			//     alert('上一页，当前页：'+curPage);

		}

		function nextPage() {
			var newPage = curPage + 1;

			//     alert('下一页，当前页：'+curPage);
			var check = true;
			if(curPage == 3) {
				//判断是否上传图片和宣言信息
				// 		var imgUrl = $('#imgUrl').val();
				// 		var speak = $('#speak').val();
				// 		if(!imgUrl) {
				// 			check = false;
				// 			alert('请上传照片');
				// 		} else if(!speak) {
				// 			check = false;
				// 			alert('请填写宣言');
				// 		}

			}

			//
			if(curPage == 4) {

			}

			if(check) {
				animatePage(newPage);
			} else {
				animatePage(curPage);
			}

		}

		function animatePage(newPage) {
			if(newPage < 0) {
				newPage = 0;
			}
			if(newPage > $(".wrap section").length - 1) {
				newPage = $(".wrap section").length - 1;
			}

			curPage = newPage;
			var newMarginTop = newPage * (-pageHeight);
			$(".sec").css({
				"-webkit-transform": "matrix(1, 0, 0, 1, 0, " + newMarginTop + ")"
			});

			var newTop = -parseInt(curPage * pageHeight * (lineHeight / secHeight));
			$(".line").css({
				"-webkit-transform": "matrix(1, 0, 0, 1, 0, " + newTop + ")"
			});

			movePrevent = true;
			setTimeout("movePrevent=false;", 300);

			// 每页动画
			if(!$(pages[curPage]).hasClass("sec0" + (curPage + 1) + "_show")) {
				$(pages[curPage]).addClass("sec0" + (curPage + 1) + "_show");
			}
			$(pages[curPage - 1]).removeClass("sec0" + (curPage) + "_show");
			$(pages[curPage + 1]).removeClass("sec0" + (curPage + 2) + "_show");

		}

		// 视差
		var scene = document.getElementById('scene');
		var parallax = new Parallax(scene);

		//map
		var init = function() {}
		//执行
		document.addEventListener('WeixinJSBridgeReady', function() {
			//     onBridgeReady();
		});
	</script>

	<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script>
		/***用户打开页面的时候就加载**/
		setWxConfig();

		function setWxConfig() {
			//通过config接口注入权限验证配置
			wx.config({
				debug: false,
				appId: '${appId}',
				timestamp: '${timestamp}',
				nonceStr: '${nonceStr}',
				signature: '${signature}',
				jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']
			});

			var titleWx = "华山牧创新创意营销大赛";
			var descWx = "华山牧创新创意营销大赛销量统计";
			var imgUrlWx = "http://www.jmax4you.com/jmax/webpages/wx/zkly2/img/bg_04_05.png";
			var linkWx = "http://www.jmax4you.com/jmax/indexZkly2.action";

			wx.ready(function() {
				//分享给朋友
				wx.onMenuShareAppMessage({
					title: titleWx + '', // 分享标题
					desc: descWx + '', // 分享描述
					link: linkWx + '', // 分享链接
					imgUrl: imgUrlWx + '', // 分享图标
					success: function() {
						// 用户确认分享后执行的回调函数
						// 	        successFcWx();
					},
					cancel: function() {
						// 用户取消分享后执行的回调函数
						// 	        cancleFcWx();
					}
				});

				//分享到朋友圈
				wx.onMenuShareTimeline({
					title: titleWx, // 分享标题
					link: linkWx, // 分享链接
					imgUrl: imgUrlWx, // 分享图标
					success: function() {
						// 用户确认分享后执行的回调函数
					},
					cancel: function() {
						// 用户取消分享后执行的回调函数
					}
				});

				//分享到QQ
				wx.onMenuShareQQ({
					title: titleWx, // 分享标题
					desc: descWx, // 分享描述
					link: imgUrlWx, // 分享链接
					imgUrl: imgUrlWx, // 分享图标
					success: function() {
						// 用户确认分享后执行的回调函数
						// 	    	successFcWx();
					},
					cancel: function() {
						// 用户取消分享后执行的回调函数
						// 	    	cancleFcWx();
					}
				});
			});

		}
	</script>

	<script type="text/javascript">
		function hideShow() {
			$('#end-bg').hide();
			animatePage(0);
		}

		jQuery.extend({
			handleError: function(s, xhr, status, e) {
				//         	debugger;
				if(s.error) {
					s.error.call(s.context || s, xhr, status, e);
				}
				if(s.global) {
					(s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
				}
			},
			httpData: function(xhr, type, s) {
				var ct = xhr.getResponseHeader("content-type"),
					xml = type == "xml" || !type && ct && ct.indexOf("xml") >= 0,
					data = xml ? xhr.responseXML : xhr.responseText;
				if(xml && data.documentElement.tagName == "parsererror")
					throw "parsererror";
				if(s && s.dataFilter)
					data = s.dataFilter(data, type);
				if(typeof data === "string") {
					if(type == "script")
						jQuery.globalEval(data);
					if(type == "json")
						data = window["eval"]("(" + data + ")");
				}
				return data;
			}
		});
	</script>

</html>